<template lang="pug">
    div 
        Form
            FormItem
                Button(type="primary" style="margin-left:10px" @click="handleSubmit()") 保存
            FormItem(label="文字内容" prop="text")
                //Input(v-model="text" placeholder="" style="width:200px")
                textarea(id="indexTextEditor")
</template>
<script>
import tinymce from "tinymce";
export default {
    data() {
        return {
            text: ""
        };
    },
    async mounted() {
        var res = (await this.axios.get("/api/indexText")).data.message.data;
        this.text = res.value;
        tinymce.init({
            selector: "#indexTextEditor",
            branding: false,
            elementpath: false,
            height: 400,
            language: "zh_CN.GB2312",
            menubar: "edit insert view format table tools",
            theme: "modern",
            plugins: [
                "imageupload advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools",
                "searchreplace visualblocks visualchars code fullscreen fullpage",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "emoticons paste textcolor colorpicker textpattern imagetools codesample"
            ],
            convert_urls: false,
            imageupload_url: "/api/imgUploadEditor",
            toolbar1:
                " imageupload newnote print fullscreen preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link emoticons media codesample",
            autosave_interval: "20s",
            image_advtab: true,
            table_default_styles: {
                width: "60%",
                borderCollapse: "collapse"
            }
        });
        tinymce.activeEditor.setContent(this.text);
    },
    methods: {
        async handleSubmit() {
            await this.axios.post("/api/indexText", {
                data: { value: tinymce.activeEditor.getContent() }
            });
            this.$Message.success("Success!");
        }
    },
    destroyed() {
        tinymce.get("indexTextEditor").destroy();
    }
};
</script>
